<template>
  <div class="table">
    <div class="title">
      <div class="search">
        <span>客户基本信息</span>
      </div>
      <div class="search">
          <el-input placeholder="公司名称" size="small" v-model="companyname" clearable></el-input>
      </div>
      <div class="search">
        <el-input placeholder="姓名" size="small" v-model="username" clearable></el-input>
      </div>
      <div class="search">
        <el-button @click="searchBtn()" size="small" type="primary">搜索</el-button>
      </div>
      <div class="search">
        <el-button @click="addBtn()" size="small" type="primary">新增</el-button>
      </div>
    </div>
    <div class="tabledata">
      <el-table :data="showTable" size = 'small' max-height='560px' border>
        <el-table-column fixed prop="company" label="公司" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="number" label="号码" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="position" label="职务" width="100">
        </el-table-column>
        <el-table-column prop="level" label="评级" width="50">
        </el-table-column>
        <el-table-column prop="descriable" label="描述" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button @click.native.prevent="editRow(scope.$index, showTable)" type="primary" size="small">
              编辑
            </el-button>
            <el-button @click.native.prevent="descrBtn(scope.$index, showTable)" type="info" size="small">
              详情
            </el-button>
            <el-button @click.native.prevent="deleteRow(scope.$index, showTable)" type="danger" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination @current-change='handleCurrentChange' :current-page='currentPage' background
        layout="total, prev, pager, next, jumper" :total='tableTotal'>
      </el-pagination>
    </div>
    <el-dialog :title= "dialogTitle" :visible.sync="dialogAddVisible" :before-close="dialogClose">
      <el-form :model="dialogForm">
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.company" autocomplete="off" :readonly="disinput" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.name" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
        <el-form-item label="号码" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.number" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.address" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.position" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
        <el-form-item label="评级" :label-width="formLabelWidth" v-if="disinput == false" >
          <el-select v-model="dialogForm.level" filterable placeholder="请选择">
            <el-option value="S"></el-option>
            <el-option value="A"></el-option>
            <el-option value="B"></el-option>
            <el-option value="C"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评级" :label-width="formLabelWidth" v-else >
          <el-input v-model="dialogForm.level" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.descriable" autocomplete="off" :readonly="disinput"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="canceBtn()">取 消</el-button>
        <el-button type="primary" @click="confirmBtn()" v-if="disinput == false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title= "提示" :visible.sync="dialogDeleteVisible">
      <span>是否确定删除这条记录?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delCance()">取 消</el-button>
        <el-button type="primary" @click="delConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import customer from '../../../common/json/customerinfo.js'

export default {
  data () {
    return {
      companyname: '',
      username: '',
      customerInfo: [],
      tableTotal: 0,
      currentPage: 1,
      pageSize: 10,
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogDescribVisible: false,
      dialogDeleteVisible: false,
      dialogTitle: '',
      disinput: false,
      orderid: 0,
      dialogForm: {
        company: '',
        name: '',
        number: '',
        address: '',
        position: '',
        level: '',
        descriable: ''
      },
      formLabelWidth: '80px'
    }
  },
  created () {
    // this.customerInfo = customer[0].customerinfo
    this.getCustomerData()
    // window.console.log(this.customerInfo)
  },
  computed: {
    showTable () {
      // window.console.log(1)
      return this.customerInfo.slice(
        (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
    },
    searchBtn () {
      this.getCustomerData()
    },
    addBtn () {
      this.dialogTitle = '新增'
      this.dialogAddVisible = true
      // window.console.log(this.dialogForm)
    },
    editRow (id, data) {
      // window.console.log(id)
      // window.console.log(data[id])
      this.dialogTitle = '编辑'
      this.dialogForm = data[id]
      // window.console.log(this.dialogForm)
      this.dialogAddVisible = true
    },
    descrBtn (id, data) {
      this.dialogForm = data[id]
      this.dialogTitle = '详细'
      this.disinput = true
      // window.console.log(this.dialogForm)
      this.dialogAddVisible = true
    },
    deleteRow (id, data) {
      this.dialogForm = data[id]
      this.dialogDeleteVisible = true
    },
    dialogClose () {
      this.dialogAddVisible = false
      this.dialogForm = {}
      this.disinput = false
    },
    canceBtn () {
      this.dialogAddVisible = false
      this.dialogForm = {}
      this.disinput = false
      // window.console.log(this.dialogForm)
    },
    confirmBtn () {
      this.submit()
      this.dialogAddVisible = false
      this.dialogForm = {}
      // window.console.log(this.dialogForm)
    },
    delCance () {
      this.dialogForm = {}
      this.disinput = false
      this.dialogDeleteVisible = false
    },
    delConfirm () {
      this.delCustomerData()
      this.dialogForm = {}
      this.dialogDeleteVisible = false
    },
    submit () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/submit_customer_info',
        {formData: this.dialogForm}, {emulateJSON: true}).then(function (response) {
        window.console.log(response.body)
        // this.customerInfo = response.body
        this.getCustomerData()
      }, function (params) {
        window.console.log('submit fail')
        window.console.log(params.status)
      })
    },
    delCustomerData () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/delete_customer_info',
        {formData: this.dialogForm}, {emulateJSON: true}).then(function (response) {
        this.getCustomerData()
      }, function (params) {
        window.console.log('submit fail')
        window.console.log(params.status)
      })
    },
    getCustomerData () {
      this.$http.post('http://localhost/stock_id_project1/public/index.php/index/index/get_customer_info',
        {company: this.companyname, name: this.username}, {emulateJSON: true}).then(function (response) {
        window.console.log(response.body)
        this.customerInfo = response.body
        this.tableTotal = this.customerInfo.length
      }, function (params) {
        window.console.log('create fail')
        window.console.log(params.status)
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.table
  margin-top: 0px
  padding: 10px 10px 5px 10px
  background: rgba(252,252,250,1)
  overflow: hidden
  .title
    display: inline-block
    font-size: 25px
    font-family:'Courier New', Courier, monospace
    .search
      float: left
      margin: 0px 10px 0 10px
  .tabledata
    margin: 0px
  .dialogInput
    width: 120px
    text-align: center
</style>
